<template>
	<view class="page-container commissioning-container">
		<view class="card-box textarea-box">
			<view class="tip">
				<text>请写明要帮你做的事情：</text>
			</view>
			<view class="textarea">
				<textarea :maxlength="-1" v-model="content" placeholder="请填写具体需要代办的事情、地点、时间等具体要求！描述越详细，接单越快~"></textarea>
			</view>
			<view class="upload-box">
				<view class="upload-list">
					<view class="upload-item" v-for="(item,i) in imgs" :key="i">
						<image :src="$img_base_url(item)" mode="widthFix"></image>
						<view class="close">
							<image @click="delImg(i)" :src="$img_path('/home/detail/upload-close.png')" mode="widthFix"></image>
						</view>
					</view>
					<view class="upload-item" v-if="imgs.length<3" @click="upload">
						<image :src="$img_path('/home/detail/upload-image.png')" mode="widthFix"></image>
						<!-- <view class="close">
							<image :src="$img_path('/home/detail/upload-close.png')" mode="widthFix"></image>
						</view> -->
					</view>
				</view>
				<view class="upload-tips">
					<view class="tip-icon">
						<image :src="$img_path('/home/detail/icon-image.png')" mode="widthFix"></image>
					</view>
					<text>补充物品图（{{imgs.length}}/3）</text>
				</view>
			</view>
		</view>

		<view class="card-box mt-20">
			<view class="order-address" @click="gotoAddressPage">
				<view class="order-address-icon">
					<image :src="$img_path('/home/order/icon-address.png')" mode="widthFix"></image>
				</view>
				<view class="order-address-info">
					<view class="order-address-info-box" v-if="address.id">
						<view class="order-address-info-city">
							<text>{{ address.formatted_address }}</text>
						</view>
						<view class="order-address-info-area">
							<text>{{ address.address }}</text>
						</view>
						<view class="order-address-info-user">
							<text>{{ address.name }}（{{ address.mobile }}）</text>
						</view>
					</view>
					<view class="order-address-info-box" v-else>
						<text>请选择</text>
					</view>
					<view class="order-address-info-right">
						<image :src="$img_path('/home/icon-right.png')" mode="widthFix"></image>
					</view>
				</view>
			</view>
		</view>

		<view class="card-box mt-20">
			<view class="display-flex alig space-between">
				<view class="label">
					<text>委托代办</text>
				</view>
				<view class="content">
					<text>{{goods.price}}元/{{ goods.wt_type==1 ? '次' : "小时"}}</text>
				</view>
			</view>
		</view>

		<view class="card-box mt-20">
			<view class="display-flex alig space-between" @click="openServiceTime">
				<view class="label">
					<text>开始时间</text>
				</view>
				<view class="content">
					<text>立即开始</text>
					<view class="icon">
						<image :src="$img_path('/home/icon-right.png')" mode="widthFix"></image>
					</view>
				</view>
			</view>
			<view class="gap" v-if="goods.wt_type==0">

			</view>
			<view class="display-flex alig space-between" v-if="goods.wt_type==0" @click="openServiceTimer">
				<view class="label">
					<text>服务时长</text>
				</view>
				<view class="content">
					<text>30分钟</text>
					<view class="icon">
						<image :src="$img_path('/home/icon-right.png')" mode="widthFix"></image>
					</view>
				</view>
			</view>
		</view>

		<view class="card-box mt-20">
			<view class="display-flex alig space-between" @click="openCouponPopup">
				<view class="label">
					<text>优惠券</text>
				</view>
				<view class="content">
					<text v-if="coupon.id">-￥{{ coupon.reduce }}</text>
					<text v-else>请选择</text>
					<view class="icon">
						<image :src="$img_path('/home/icon-right.png')" mode="widthFix"></image>
					</view>
				</view>
			</view>
		</view>

		<view class="bottom-box">
			<view class="bottom-all-money" @click="openItemPopup">
				<text class="pre">￥</text>
				<text>{{totalAmount}}</text>
				<!-- <text class="old-price">￥15</text> -->
				<view class="select-icon">
					<image :src="$img_path('/home/detail/icon-bottom.png')" mode="widthFix"></image>
				</view>
			</view>
			<view class="common-btn-bg-color bottom-confirm-btn" @click="submit">
				<text>立即下单</text>
			</view>
		</view>
		<!-- 选择服务时间 -->
		<serviceTimePickerVue title="选择开始时间" ref="serviceTimePickerRef" @confirm="confirmTime" />
		<!-- 选择服务时长 -->
		<serviceTimePickerVue title="选择服务时长" ref="serviceTimeOut" />
		<!-- 优惠券弹窗 -->
		<couponPopupVue ref="couponPopup" @confirm="confirmCoupon" />
		<!-- 支付弹窗 -->
		<payPopupVue :amount="totalAmount" ref="payPopup" @confirm="payConfrim" />
		<!-- 明细弹窗 -->
		<view class="item-popup-wrap" v-if="itemPopup" @click="itemPopup = false">
			<view class="item-box" @click.stop="">
				<view class="item-popup-header">
					<view class="display-flex alig">
						<text>费用明细</text>
						<!-- <view class="display-flex alig tip" @click="openJijiaPopup">
							<text>计价标准</text>
							<view class="icon-right">
								<image :src="$img_path('/home/icon-right.png')" mode="widthFix"></image>
							</view>
						</view> -->
					</view>
					<view class="icon-close" @click="closeItemPopup">
						<image :src="$img_path('/course/close_popup.png')" mode="widthFix"></image>
					</view>
				</view>
				<view class="item-list">
					<view class="item-label">
						<text>委托费用（{{goods.wt_type==0 ? '60分钟': '次'}}）</text>
					</view>
					<view class="item-content">
						<text>¥ {{goods.price}}</text>
					</view>
				</view>
				<!-- <view class="item-list">
					<view class="item-label">
						<text>预约服务费</text>
					</view>
					<view class="item-content">
						<text>¥ 15.00</text>
					</view>
				</view> -->
				<view class="item-list">
					<view class="item-label">
						<text>夜间服务费</text>
					</view>
					<view class="item-content">
						<text>¥ {{Number($dayjs(starttime).format('HH'))>=21?goods.night_money:'0.00'}}</text>
					</view>
				</view>
				<view class="item-list">
					<view class="item-label">
						<text>优惠金额</text>
					</view>
					<view class="item-content">
						<text>¥ {{coupon.reduce ? coupon.reduce : '0.00'}}</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 计价标准 -->
		<uni-popup ref="jijiaPopup" type="bottom" background-color="#fff" borderRadius="20rpx 20rpx 0 0">
			<view class="jj-popup">
				<view class="jj-header">
					<view class="">
						
					</view>
					<text>计价标准</text>
					<view class="jj-icon-close" @click="closeJijiaPopup">
						<image :src="$img_path('/course/close_popup.png')" mode="widthFix"></image>
					</view>
				</view>
				<view class="jj-content">
					<text>
						基础费+特殊时段费用+预约服务费，内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
					</text>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		getServiceGoodsDetail,
		getAddressList,
		getSysConfig,
		getGoodsAddList,
		getGoodsOrderSettle,
		getGoodsOrderCreate
	} from '@/utils/api/serviceApi'
	import { upload } from "@/utils/api/public.js"
	import serviceTimePickerVue from './components/service-time-picker/service-time-picker.vue'
	import couponPopupVue from '../serviceConfrimOrder/components/coupon-popup/coupon-popup.vue'
	import payPopupVue from '@/components/pay-popup/pay-popup.vue'
	export default {
		components: {
			serviceTimePickerVue,
			couponPopupVue,
			payPopupVue
		},
		data() {
			return {
				itemPopup: false,
				goodsId:0,
				address:{},
				goods:{},
				coupon:{},
				totalAmount:0,
				
				imgs:[],
				content:'',
				
				starttime:''
			}
		},
		onLoad(options) {
			this.goodsId = options.id
			this.getServiceGoodsDetail()
			this.getAddressList()
		},
		methods: {
			upload(){
				if(this.imgs.length>=3){
					return
				}
				const that = this
				uni.chooseImage({
					count: 3 - that.imgs.length, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: function (res) {
						const tempFilePaths = res.tempFilePaths
						upload({
							file: tempFilePaths[0]
						}).then(response => {
							const url = response.data.url
							that.imgs.push(url)
						}).catch(error => {
							console.log("upload error", error)
						})
					},
					fail: function (error) {
						console.log("chooseImage fail", error)
					}
				})
				// wx.chooseMessageFile({
				// 	count: 1, //默认100
				// 	type: "image",
				// 	success: function(res) {
				// 		console.log(res);
				// 		const _file = res.tempFiles[0]
				// 		upload({
				// 			file: _file.path
				// 		}).then(response => {
				// 			console.log("上传成功", response)
				// 			const url = response.data.url
				// 			that.imgs.push(url)
				// 		})
				// 	}
				// });
			},
			delImg(i){
				this.imgs.splice(i,1)
			},
			
			// 选择时间
			confirmTime(time){
				// console.log(time)
				this.starttime = time
				this.getGoodsOrderSettle()
			},
			
			// 地址
			async getAddressList() {
				try {
					const res = await getAddressList()
					console.log("地址列表", res)
					const {
						data = []
					} = res?.data
					if (data && data.length) {
						this.address = data.find(item => item.default == '1') || {}
					}
				} catch (e) {
					//TODO handle the exception
					console.log("获取地址列表失败", e)
				}
			},
			// 选择地址
			gotoAddressPage() {
				const that = this
				uni.navigateTo({
					url: "/pagesService/address/index",
					success: function() {
						uni.$once("updateServiceOrderAddress", (data) => {
							console.log("updateServiceOrderAddress data", data)
							that.address = data.data
						})
					}
				})
			},
			// 详情
			async getServiceGoodsDetail() {
				try {
					const res = await getServiceGoodsDetail({
						id: this.goodsId
					})
					console.log("商品详情", res)
					this.goods = res.data
					// this.sku = res.data.sku.find(item => item.id == this.skuId)
					this.getGoodsOrderSettle()
				} catch (e) {
					console.log("查询商品详情失败", e)
					//TODO handle the exception
				}
			},
			
			// 确认订单
			async getGoodsOrderSettle() {
				try{
					// const isNight = this.goods.goods_type == 0 ? this.serviceTime2.time.isNight : false
					const data = {
						goods_id: this.goodsId,
						goods_sku_id: '',
						num: 1,
						night_money: Number(this.$dayjs(this.starttime).format('HH'))>=21?this.goods.night_money:0,
						skill_id: "",
						goodsadd_ids: '',
						goodsadd2_ids: '',
						coupon_id: this.coupon.id || ""
					}
					const res = await getGoodsOrderSettle(data)
					if(res.data=='优惠券无法使用'){
						uni.showToast({
							title:res.data,
							icon:'none'
						})
						this.coupon={}
						this.getGoodsOrderSettle()
						return
					}
					console.log("getGoodsOrderSettle res", res)
					this.totalAmount = res.data.settle.sumprice
				}catch(e){
					//TODO handle the exception
					console.log("getGoodsOrderSettle e", e)
				}
			},
			
			openServiceTime() {
				this.$refs.serviceTimePickerRef.open()
			},
			openServiceTimer() {
				this.$refs.serviceTimerPickerRef.open()
			},
			
			// 优惠券弹窗
			openCouponPopup() {
				this.$refs.couponPopup.open(this.coupon)
			},
			// 选择优惠券
			confirmCoupon(coupon) {
				this.coupon = coupon
				this.getGoodsOrderSettle()
			},
			
			openItemPopup() {
				this.itemPopup = !this.itemPopup
			},
			closeItemPopup() {
				this.itemPopup = false
			},
			openJijiaPopup() {
				// console.log("打开计价标准弹窗")
				this.$refs.jijiaPopup.open()
			},
			closeJijiaPopup() {
				this.$refs.jijiaPopup.close()
			},

			submit() {
				this.$refs.payPopup.open()
			},
			
			payConfrim(data){
				//data.payType支付方式
				let form = {
					address_id:this.address.id,
					goods_id: this.goods.id,//商品id
					goods_sku_id:'',
					num:this.goods.wt_type==1 ? 1 :1,
					city:this.address.city ,//城市
					paytype:data.payType,
					coupon_id:this.coupon.id || '',
					starttime:this.starttime,
					night_money:Number(this.$dayjs(this.starttime).format('HH'))>=21?this.goods.night_money:0,
					is_wt:1,
					wt_desc:this.content,
					wt_images:this.imgs.join(','),
					choose_skill_type:'0',
					memo:'',
					skill_id:''
				}
				uni.showLoading({
					title:'支付中...'
				})
				getGoodsOrderCreate(form).then(res=>{
					uni.hideLoading()
					this.$refs.payPopup.close()
					if(res.code==1){
						uni.navigateTo({
							url:`/pagesService/servicePayResult/servicePayResult?data=${JSON.stringify(res.data)}`
						})
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	@import "commissioningService.scss"
</style>